<template>
	<view class="address_book">
		<view style="margin-bottom: 20rpx;">
			<uni-search-bar style="padding: 0;" placeholder="请输入姓名或手机号查询" v-model="queryParam.what" @confirm="init"
				radius="5" cancelButton="none"></uni-search-bar>
		</view>
		<view class="address_book_list">
			<view class="address_book_box" v-for="(item,index) in list" :key="index"
				@click="toAddressBookDetails(item)">
				<view class="address_book_box_left">
					<image :src="item.imageUrl" mode="" style="width:75rpx;height: 75rpx;border-radius: 12rpx;"></image>
				</view>
				<view class="address_book_box_right">
					<view>
						<view class="display: flex;align-items: center;">
							<text style="margin-right: 40rpx;">{{item.showName}}</text>
							<block v-if="item.type=='user' && isOnDutyEnabled">
								<uni-tag :inverted="true" text="在岗" type="success" size="small"
									v-if="item.onDuty"></uni-tag>
								<uni-tag :inverted="true" text="离岗" type="error" size="small" v-else></uni-tag>
								{{item.onDuty ? "" : item.remark}}
							</block>
						</view>
						<view style="margin-top: 6rpx; font-size:12px; opacity: 0.7;">
							{{item.deptName}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Api
	} from "@/utils/Api.js";
	import {
		getAction
	} from '@/utils/request';
	import deptImage from '../static/dept.png'
	export default {
		data() {
			return {
				list: [],
				url: {
					list: '/mobile/listAddress'
				},
				queryParam: {
					deptCode: '',
					what: '',
					isAll: false,
				},
				loadHock: true,
				isInnerEmailEnabled: false,
				isOnDutyEnabled: false,
			};
		},
		onLoad(options) {
			console.log("options", options)
			let record = null
			if (options.record) {
				record = JSON.parse(options.record)
			}
			this.queryParam.deptCode = options.deptCode || 'root'
			if (record) {
				this.queryParam.isAll = record.isAll || false
			}
			this.init()
		},
		methods: {
			init() {
				this.list = []
				getAction(this.url.list, this.queryParam).then(res => {
					console.log('res', res)
					const {
						children,
						list,
						isInnerEmailEnabled,
						isOnDutyEnabled
					} = res.data
					this.isInnerEmailEnabled = isInnerEmailEnabled;
					this.isOnDutyEnabled = isOnDutyEnabled;
					console.log('isOnDutyEnabled', isOnDutyEnabled);
					if (list && list.length) {
						list.forEach(item => {
							item.showName = item.realName
							item.type = 'user'
							item.imageUrl = ''
							if (item.photo) {
								// 不加public在企业微信手机端中会报“非法访问”，而PC端则不会
								item.imageUrl = Api.baseUrl + '/public/showImg.do?path=' + item.photo;
							} else {
								if (item.gender == 1) {
									item.imageUrl = '../../static/usercenter/woman.png';
								} else {
									item.imageUrl = '../../static/usercenter/man.png';
								}
							}
						})
						this.list = this.list.concat(list)
					}
					if (children && children.length && this.queryParam.isAll == false) {
						children.forEach(item => {
							item.showName = item.name;
							item.type = 'dept'
							item.imageUrl = deptImage
						})
						this.list = this.list.concat(children)
					}
				})
			},
			toAddressBookDetails(item) {
				console.log('isInnerEmailEnabled', this.isInnerEmailEnabled, 'item', item);
				switch (item.type) {
					case 'user':
						uni.navigateTo({
							url: `/application/addressBook/AddressBookDetails?isOnDutyEnabled=${this.isOnDutyEnabled}&isInnerEmailEnabled=${this.isInnerEmailEnabled}&record=${encodeURIComponent(JSON.stringify(item))}`
						})
						break
					case 'dept':
						uni.navigateTo({
							url: `/application/addressBook/AddressBook?isOnDutyEnabled=${this.isOnDutyEnabled}&isInnerEmailEnabled=${this.isInnerEmailEnabled}&deptCode=${item.code}`
						})
						break
				}
			}
		}
	};
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.address_book {
		height: 100%;
		padding: 20rpx;
		display: flex;
		flex-direction: column;

		&_list {
			flex: 1;
			overflow-y: auto;
		}

		&_box {
			display: flex;
			margin-bottom: 20rpx;

			&_left {
				margin-right: 20rpx;
			}

			&_right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				border-bottom: 1px solid rgb(228, 228, 228);
				font-size: 28rpx;
				padding: 10rpx 0;
			}
		}
	}
</style>